<template>
    <div class="box">
        <div class="header"></div>
        <div class="meddle">
            <van-sidebar v-model="active" @change="onChange">
                <van-sidebar-item title="食品" />
                <van-sidebar-item title="电器" />
                <van-sidebar-item title="洗护" />
                <van-sidebar-item title="女装" />
                <van-sidebar-item title="手机" />
            </van-sidebar>
            <ul>
                <li v-for="item in list" :key="item.id">
                    <img :src="item.image" alt="">
                    <p>{{ item.title }}</p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
    import { ref,onMounted } from "vue";
    import request from '@/utils/request.js'
    const list=ref([])
    const arr=ref('食品','电器','洗护','女装','手机')
    const onChange=()=>{
        request.get('/kind',{
            params:{
               value:value.value
            }
        }).then(res=>{
            if(res.data.code==200){
                list.value=res.data.data
            }
        })
    }
</script>